import React, { PureComponent } from 'react';
import { Form, Input, Select, Checkbox, Row, Col } from 'antd';
import { queryData } from '@/services/staff';
import { DEFAULT_RESPONE_SUCCESS, DEFAULT_VALID_STATE } from '@/constants';

const { Option } = Select;

export default class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      roles: [],
      departments: []
    }
  }

  componentDidMount() {
    const { form, modularName, data = {}, disabled } = this.props;

    if (data.unitIds) {
      this.props.dispatch({
        type: `department/queryData`,
        payload: {
          state: DEFAULT_VALID_STATE,
          unit_id: parseInt(data.unitIds),
          current: 1,
          pageSize: 10000,
          callback: (data = []) => {
            this.setState({ departments: data });
          }
        }
      });
    }
    if (!disabled && data.phone_is_secrecy === 1 && data.sysUserId) {
      this.props.dispatch({
        type: `${modularName}/getTelephone`,
        payload: {
          sysUserId: data.sysUserId,
          callback: (data) => {
            this.mobile = data;
            form.setFieldsValue({ mobile: data });
          }
        }
      });
    }
    this.props.dispatch({
      type: 'role/queryData',
      payload: {
        callback: (data = []) => {
          this.setState({ roles: data });
        }
      }
    });
  }

  checkUserNameUnique(rule, value, callback) {
    const { data = {} } = this.props;

    if (!data.mobile || (data.phone_is_secrecy !== 1 && data.mobile !== value) || (this.mobile && this.mobile !== value)) {
      queryData({ current: 1, pageSize: 1, username: value }).then(function (response) {
        if (response && response.status === DEFAULT_RESPONE_SUCCESS) {
          const { result = {} } = response;
          const { data = [] } = result;

          if (data && data.length > 0) {
            callback('手机号已存在!');
          } else {
            callback();
          }
        } else {
          callback('校验手机号唯一失败!');
        }
      });
    } else {
      callback();
    }
  }

  render() {
    const { roles = [] } = this.state;
    const { form, constants = {}, data = {}, disabled = false } = this.props;
    const { genders = [], ranks = [] } = constants;
    const { getFieldDecorator } = form;
    const telphone = data.telphone || '';
    const family_phone = data.family_phone || '';
    const arrayTel = telphone.split('-');
    const arrayFamily = family_phone.split('-');
    let departments = data.id ? this.state.departments : constants.departments;

    return (
      <Form layout='vertical'>
        <Form.Item label='姓名'>
          {getFieldDecorator('name', {
            initialValue: data.name || undefined,
            rules: [{ required: true, message: '该项为必填项' }]
          })(
            <Input placeholder='请输入姓名' size='large' disabled={disabled} />
          )}
        </Form.Item>
        <div>
          <Form.Item label='手机号' style={{ display: 'inline-block', verticalAlign: 'top' }}>
            {getFieldDecorator('mobile', {
              initialValue: data.mobile || undefined,
              validateFirst: true,
              validateTrigger: 'onBlur',
              rules: [
                { required: true, message: '该项为必填项' },
                {
                  validator: (rule, value, callback) =>
                    this.checkUserNameUnique(rule, value, callback),
                },
              ]
            })(
              <Input placeholder='请输入手机号' size='large' style={{ width: 390, marginRight: 16 }} disabled={disabled} />
            )}
          </Form.Item>
          <Form.Item label={<div style={{ height: 29 }} />} style={{ display: 'inline-block', verticalAlign: 'top' }}>
            {getFieldDecorator('phone_is_secrecy', {
              initialValue: data.phone_is_secrecy === 1 || undefined,
              valuePropName: 'checked'
            })(
              <Checkbox disabled={disabled} style={{ display: "none" }}>手机号保密</Checkbox>
            )}
          </Form.Item>
        </div>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item label='性别'>
              {getFieldDecorator('age', {
                initialValue: data.user_age || undefined,
                rules: [{ required: true, message: '该项为必填项' }]
              })(
                <Select allowClear placeholder='请选择性别' size='large' disabled={disabled}>
                  {genders && genders.map(item => {
                    return <Option key={item.dicKey} value={item.dicKey}>{item.dicName}</Option>
                  })}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='部门'>
              {getFieldDecorator('deptIds', {
                initialValue: data.deptIds || undefined,
                rules: [{ required: true, message: '该项为必填项' }]
              })(
                <Select allowClear placeholder='请选择部门' size='large' disabled={disabled}>
                  {departments && departments.map(item => {
                    return <Option key={item.id} value={item.id + ''}>{item.dept_name}</Option>
                  })}
                </Select>
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            {/* <Form.Item label='职级'>
              {getFieldDecorator('rank', {
                initialValue: data.rankId || undefined
              })(
                <Select allowClear placeholder='请选择职级' size='large' disabled={disabled}>
                  {ranks && ranks.map(item => {
                    return <Option key={item.id} value={item.id}>{item.rank_name}</Option>
                  })}
                </Select>
              )}
            </Form.Item> */}
            <Form.Item label='职务'>
              {getFieldDecorator('duty', {
                initialValue: data.user_duty || undefined,
                rules: [{ required: true, message: '该项为必填项' }]
              })(
                <Input placeholder='请输入职务' size='large' disabled={disabled} />
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='办公地址'>
              {getFieldDecorator('address', {
                initialValue: this.props.unitAddress || undefined,
                rules: [{ required: true, message: '该项为必填项' }]
              })(
                <Input placeholder='请输入办公地址' size='large' disabled={disabled} />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item label='权限'>
              {getFieldDecorator('roleIds', {
                initialValue: data.roleIds || undefined,
                rules: [{ required: true, message: '该项为必填项' }]
              })(
                <Select allowClear placeholder='请选择权限' size='large' disabled={disabled}>
                  {roles && roles.map(item => {
                    return <Option key={item.roleId} value={item.roleId}>{item.roleName}</Option>
                  })}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='办公电话'>
              {getFieldDecorator('telphone', {
                initialValue: this.props.unit_phone || undefined,
                rules: [{ required: true, message: '该项为必填项' }]
              })(
                <Input placeholder='请输入办公电话' size='large' disabled={disabled} />
              )}
            </Form.Item>
          </Col>
        </Row>
        {/* <div>
          <Form.Item label='办公电话' style={{ display: 'inline-block', verticalAlign: 'top' }}>
            {getFieldDecorator('telphone[0]', {
              initialValue: arrayTel[0] || undefined
            })(
              <Input placeholder='区号' size='large' style={{ width: 128 }} disabled={disabled} />
            )}
            <span style={{ margin: '0 5px' }}>-</span>
          </Form.Item>
          <Form.Item label={<div style={{ height: 21 }} />} style={{ display: 'inline-block', verticalAlign: 'top' }}>
            {getFieldDecorator('telphone[1]', {
              initialValue: arrayTel[1] || undefined
            })(
              <Input placeholder='电话号码' size='large' style={{ width: 220 }} disabled={disabled} />
            )}
            <span style={{ margin: '0 5px' }}>-</span>
          </Form.Item>
          <Form.Item label={<div style={{ height: 21 }} />} style={{ display: 'inline-block', verticalAlign: 'top' }}>
            {getFieldDecorator('telphone[2]', {
              initialValue: arrayTel[2] || undefined
            })(
              <Input placeholder='分机号' size='large' style={{ width: 130 }} disabled={disabled} />
            )}
          </Form.Item>
        </div>
        <div>
          <Form.Item label='家庭电话' style={{ display: 'inline-block', verticalAlign: 'top' }}>
            {getFieldDecorator('family_phone[0]', {
              initialValue: arrayFamily[0] || undefined
            })(
              <Input placeholder='区号' size='large' style={{ width: 128 }} disabled={disabled} />
            )}
            <span style={{ margin: '0 5px' }}>-</span>
          </Form.Item>
          <Form.Item label={<div style={{ height: 21 }} />} style={{ display: 'inline-block', verticalAlign: 'top' }}>
            {getFieldDecorator('family_phone[1]', {
              initialValue: arrayFamily[1] || undefined,
            })(
              <Input placeholder='电话号码' size='large' style={{ width: 365 }} disabled={disabled} />
            )}
          </Form.Item>
        </div> */}
      </Form>
    );
  }
}